<template>
    <div>
        <el-card class="box-card" shadow="never">
            <!--导航栏-->
            <el-page-header @back="back" :content="content">
            </el-page-header>
            <el-form ref="form" class="edit-el-form"  :model="form" :rules="rules" label-width="auto">
                <el-form-item label="社区名称" prop="c_name">
                    <el-input v-model="form.c_name" required></el-input>
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                   <el-input v-model="form.address" required></el-input>
                </el-form-item>
                <el-form-item label="办公地点" prop="work_address">
                   <el-input v-model="form.work_address" required></el-input>
                </el-form-item>
                <el-form-item label="常住人口" prop="population">
                   <el-input v-model="form.population" required>
                     <template slot="append">万人</template>
                   </el-input>
                </el-form-item>
                <el-form-item label="占地面积" prop="cover_area">
                   <el-input v-model="form.cover_area" required>
                     <template slot="append">平方公里</template>
                   </el-input>
                </el-form-item>
                <el-form-item label="业务电话" prop="phone">
                   <el-input v-model="form.phone" required></el-input>
                </el-form-item>
                <el-form-item label="居委会主任" prop="grid_master">
                   <el-input v-model="form.grid_master" required></el-input>
                </el-form-item>
                <el-form-item label="管理员电话" prop="grid_master_phone">
                   <el-input v-model="form.grid_master_phone" required></el-input>
                 </el-form-item>
                <el-form-item label="社区图片" prop="pic">
                    <Upload :limit="1" :file_list="pic_list" :catch_urls="catch_urls" :remove_urls="remove_urls" :upload_tip="upload_tip"></Upload>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model.number="form.sort" required>
                      <template slot="append">注：排序越大越靠前，默认100</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="组织架构" prop="organs">
                  <Editor :catchData="catchOrgansData" :child_content="organs_content"></Editor>
                </el-form-item>
                <el-form-item label="网格化管理介绍" prop="grid_introduce">
                  <Editor :catchData="catchGridData" :child_content="grid_content"></Editor>
                </el-form-item>
                <el-form-item label="社区简介" prop="c_introduce">
                  <Editor :catchData="catchCData" :child_content="c_content"></Editor>
                </el-form-item>
                <el-form-item label="工作思路" prop="work_idea">
                  <Editor :catchData="catchWorkData" :child_content="work_content"></Editor>
                </el-form-item>
                <el-row>
                  <VMap :show_map="show_map" :amap_center="amap_center" :amap_markers="amap_markers" :catch_map="catch_map" :remove_markers="remove_markers"></VMap>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="X坐标" prop="x_coordinate">
                        <el-input v-model="form.x_coordinate"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="Y坐标" prop="y_coordinate">
                        <el-input v-model="form.y_coordinate"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="状态">
                    <el-radio-group v-model="form.enabled">
                        <el-radio border label="0">禁用</el-radio>
                        <el-radio border label="1">正常</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!--查看不展示按钮-->
                <el-form-item v-if="edit_type!=0">
                    <el-button type="primary" @click="submitForm('form')" :loading="loading">{{button_name}}</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
    import Upload from '@/components/Upload.vue';
    import Editor from '@/components/Editor.vue';
    import VMap from '@/components/VMap.vue';
    import { getCommunityInfo,editCommunity } from '@/api/community.js';
    import { getOrganInfo } from '@/api/organ.js';
    export default {
        name:'CommunityEdit',
        components:{Upload,Editor,VMap},
        data() {
            return {
                form: {
                    c_name: '',
                    address: '',
                    work_address:'',
                    phone:'',
                    population:'',
                    cover_area:'',
                    grid_master:'',
                    grid_master_phone:'',
                    sort: 100,
                    pic:'',
                    organs:'',
                    grid_introduce:'',
                    c_introduce:'',
                    work_idea:'',
                    x_coordinate:'',
                    y_coordinate:'',
                    enabled: '1',
                },
                //校验规则
                rules:{
                    c_name: [
                        { required:true , message:'请输入社区名称',trigger:'blur' }
                    ],
                    address:[
                        { required:true , message:'请输入详细地址',trigger:'blur' }
                    ],
                    pic:[
                        { required:true , message:'请上传社区图片',trigger:'blur' }
                    ],
                    sort:[
                        { required:true , message:'请输入排序号',trigger:'blur' },
                        { type:'number', message:'排序号必须为数字' }
                    ],
                    x_coordinate:[
                        { required:true , message:'请选择坐标',trigger:'blur' },
                    ],
                    y_coordinate:[
                        { required:true , message:'请选择坐标',trigger:'blur' },
                    ],
                },
                //加载组件
                loading: false,
                button_name:'立即提交',
                content:'社区添加',
                organs_content:"",
                grid_content:"",
                c_content:"",
                work_content:'',
                pic_list:[],
                upload_tip:'只能上传jpg/png/gif文件，且不超过500kb，仅允许上传一张',
                image_urls:[],
                //地图中心点
                amap_center:[121.5273285,31.21515044],
                //地图组件标点
                amap_markers:[],
                show_map:false
            }
        },
        methods: {
            submitForm(formName){
                let that = this;
                    this.$refs[formName].validate((valid,object) => {
                            if (valid) {
                                this.loading=true;
                                this.button_name='正在提交';
                                if(that.image_urls.length>0){
                                   that.form.pic=that.image_urls[0];
                                }
                                let send_data={
                                    api_token:this.$store.getters.getSessionId,
                                    c_name:this.form.c_name,
                                    address:this.form.address,
                                    work_address:this.form.work_address,
                                    phone:this.form.phone,
                                    population:this.form.population,
                                    cover_area:this.form.cover_area,
                                    grid_master:this.form.grid_master,
                                    grid_master_phone:this.form.grid_master_phone,
                                    sort:this.form.sort,
                                    pic:this.form.pic,
                                    organs:this.form.organs,
                                    grid_introduce:this.form.grid_introduce,
                                    c_introduce:this.form.c_introduce,
                                    work_idea:this.form.work_idea,
                                    x_coordinate:this.form.x_coordinate,
                                    y_coordinate:this.form.y_coordinate,
                                    enabled:this.form.enabled,
                                };
                                if(this.id!=-1){
                                    send_data.id=this.id;
                                }
                                editCommunity(send_data).then(function(response){
                                     let code=response.data.code;
                                     let type=code==1?'success':'error';
                                     let msg=code==1?'成功':'失败';
                                     that.$message({
                                         message:that.content+msg,
                                         duration:1200,
                                         type:type,
                                         onClose:function(e){
                                             that.loading=false;
                                             if(code==1){
                                                that.$router.push('/communitylist');
                                             }else{
                                                that.button_name='立即提交';
                                             }
                                         }
                                    })
                                })
                            }else{
                                setTimeout(()=>{
                                  const is_error=document.getElementsByClassName('is-error');
                                  is_error[0].querySelector('input,button').focus();
                                },100);
                                return false;
                            }
                    })
            },
            back(){
                this.$router.go(-1);
            },
            //富文本内容
            catchOrgansData(e){
               this.form.organs=e;
            },
            catchGridData(e){
               this.form.grid_introduce=e;
            },
            catchCData(e){
               this.form.c_introduce=e;
            },
            catchWorkData(e){
               this.form.work_idea=e;
            },
            //这边只有一张，如果有数组就移除数组中的下标
            remove_urls(remove_index){
              this.image_urls.splice(remove_index,1);
            },
            //获取组件返回的图片路径
            catch_urls(url){
               this.image_urls.push(url);
            },
            //获取地图坐标,并且标点
            catch_map(x,y){
               this.amap_markers.push([x, y]);
               this.form.x_coordinate=x;
               this.form.y_coordinate=y;
            },
            //移除标点
            remove_markers(){
               this.amap_markers=[];
            }
        },
        created(){
            //查询中心点坐标
            let info_data={
               api_token:this.$store.getters.getSessionId,
               fields:'x_coordinate,y_coordinate'
            };
            let that=this;
            getOrganInfo(info_data).then(function(response){
               let val=response.data.info;
               if(response.x_coordinate!='' && val.y_coordinate!=''){
                  that.amap_center=[val.x_coordinate,val.y_coordinate];
               }
               that.show_map=true;
            })
            //查询记录
            if(this.id!=-1){
                var send_data={
                    api_token:this.$store.getters.getSessionId,
                    id:this.id
                }
                getCommunityInfo(send_data).then(function(response){
                    let val=response.data.info;
                    that.form.c_name=val.c_name;
                    that.form.address=val.address;
                    that.form.work_address=val.work_address;
                    that.form.phone=val.phone;
                    that.form.population=val.population==0?'':val.population,
                    that.form.cover_area=val.cover_area==0?'':val.cover_area,
                    that.form.grid_master=val.grid_master,
                    that.form.grid_master_phone=val.grid_master_phone,
                    that.form.sort=val.sort;
                    that.form.pic=val.pic;
                    that.image_urls=[val.pic];
                    that.form.organs=val.organs;
                    that.form.grid_introduce=val.grid_introduce;
                    that.form.c_introduce=val.c_introduce;
                    that.form.work_idea=val.work_idea;
                    that.grid_content=val.grid_introduce;
                    that.c_content=val.c_introduce;
                    that.organs_content=val.organs;
                    that.work_content=val.work_idea;
                    that.form.enabled=val.enabled.toString();
                    that.form.x_coordinate=val.x_coordinate;
                    that.form.y_coordinate=val.y_coordinate;
                    that.pic_list.push({
                        name:0,
                        url:val.pic
                    });
                      //地图
                    if(val.x_coordinate>0 && val.y_coordinate>0){
                      that.amap_markers.push([parseFloat(val.x_coordinate), parseFloat(val.y_coordinate)]);
                    }
                })
            }
            //修改标题
            if(this.edit_type==1){
                this.content='社区添加';
            }else if(this.edit_type==0){
                this.content='社区详情';
            }else if(this.edit_type==2){
                this.content='社区编辑';
            }
        },
        computed:{
            id(){
                return this.$route.params.id;
            },
            edit_type(){
                return this.$route.params.edit_type;
            },
        }
    }
</script>

<style>
    .edit-el-form{
        margin-top:30px;
    }
</style>
